<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'brand'" />
    <div class="page-main">
      <div class="banner">
        <img oncontextmenu="return false" :src="info.brand_photo" class="fit-img" alt="" />
        <div class="banner-inner">
          <div class="banner-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ info.brand_title }}</div>
          <div class="banner-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" v-html="info.brand_titles"></div>
        </div>
        <div class="banner-arr">
          <img src="@/assets/images/arr_d.svg" class="icon">
        </div>
      </div>
      <div class="brand-card" :class="{'pr': index % 2 === 1}" v-for="(item, index) in list" :key="index">
        <div class="brand-photo">
          <img oncontextmenu="return false" :src="item.photo" class="fit-img" alt="">
          <div class="card-text" v-html="item.photo_title"></div>
        </div>
        <div class="brand-info">
          <div class="brand-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" v-html="item.title"></div>
          <div class="brand-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" v-html="item.desc"></div>
          <a :href="item.url || 'javascript:;'" target="_blank" class="brand-btn flex-center wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
            <span class="label">{{ item.search_title }}</span>
            <i class="iconfont icon-arrow"></i>
          </a>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formatText, hideLoading } from '../../utils/utils'
import { getBrandInfo, getBrandList } from '@/api/brand' 
import WOW from 'wow.js'

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'

const theme = ref('transparent')
const info = ref({
  brand_photo: '',
  brand_title: '',
  brand_titles: ''
})
const list = ref([])

onMounted(() => {
  loadData()
  window.addEventListener('scroll', (event) => {
    const scrollTop = window.scrollY
    if (scrollTop > 100) {
      theme.value = 'white'
    } else {
      theme.value = 'transparent'
    }
  });
  const wow = new WOW({
    // scrollContainer: '.page',
    offset: 100
  })
  wow.init()
});

const loadData = () => {
  getBrandInfo().then(res => {
    info.value = res.data.list
    info.value.brand_titles = formatText(res.data.list.brand_titles)
    hideLoading()
  })
  getBrandList().then(res => {
    list.value = res.data.map(el => {
      el.title = formatText(el.title)
      el.desc = formatText(el.titles)
      el.photo_title = el.photo_title ? formatText(el.photo_title.toUpperCase()) : ''
      el.style = el.button_color ? `background-color: ${el.button_color}` : ''
      return el
    })
  })
};

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
  /* overflow-y: auto; */
}
.banner {
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40rem /* 640/16 */;
  z-index: 10;
  .banner-title {
    text-align: center;
    color: #FFFFFF;
    font-size: 3.125rem /* 50/16 */;
    line-height: 1;
    font-weight: 500;
  }
  .banner-desc {
    margin-top: 2.5rem /* 40/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.375rem /* 38/16 */;
    text-align: center;
    color: #F2F2F2;
  }
}
.brand-card {
  height: 100vh;
  width: 100%;
  display: flex;
  .brand-photo {
    width: 50%;
    height: 100vh;
    position: relative;
    .card-text {
      position: absolute;
      bottom: 3.125rem /* 50/16 */;
      padding: 0 5rem /* 80/16 */;
      font-size: 2.375rem /* 38/16 */;
      left: 0;
      width: 100%;
      color: rgb(255, 255, 255, .7);
      line-height: 2.8125rem /* 45/16 */;
      font-weight: 200;
    }
  }
  &.pr {
    flex-direction: row-reverse;
    .brand-info {
      background: url(@/assets/images/brand/brand_bg_2.png) no-repeat 100% 100% / cover;
    }
  }
  .brand-info {
    background: url(@/assets/images/brand/brand_bg_1.png) no-repeat 100% 100% / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    .brand-title {
      font-size: 2.1875rem /* 35/16 */;
      line-height: 1.8;
      font-weight: 500;
      text-align: center;
      max-width: 26.25rem /* 420/16 */;
      color: #000000
    }
    .brand-desc {
      margin-top: 1.375rem /* 22/16 */;
      font-size: .875rem /* 14/16 */;
      line-height: 1.5rem /* 24/16 */;
      color: #595757;
      text-align: center;
      max-width: 26.25rem /* 420/16 */;
    }
    
  }
}
.brand-btn {
  margin-top: 2.625rem /* 42/16 */;
  width: 10rem /* 160/16 */;
  height: 3.25rem /* 52/16 */;
  border-radius: 2px;
  background: #000;
  &:hover {
    background: #E50012;
  }
  .label {
    font-size: 1rem /* 16/16 */;
    color: #FFFFFF;
    line-height: 1;
  }
  .iconfont {
    font-size: 1rem /* 16/16 */;
    line-height: 1;
    color: #FFFFFF;
    margin-left: .125rem /* 2/16 */;
  }
}
.banner-arr {
  width: .75rem /* 12/16 */;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5rem /* 40/16 */;
  .icon {
    width: 100%;
    animation: arr infinite linear 1s;
  }
}
@keyframes arr {
  0% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(2px);
  }
}
</style> 